<!DOCTYPE html>
<html>
    <head>
        <title>Subresource integrity for style resources when
            the integrity attribute is chaned after fetch is started</title>
        <script src="../../resources/testharness.js"></script>
        <script src="../../resources/testharnessreport.js"></script>

    </head>
    <body>
        <script>
        var test1 = async_test(
            'Integrity attribute at the time of fetch start should be used ' +
            '(correct -> wrong)');
        var link1 = document.createElement('link');
        link1.setAttribute('rel', 'stylesheet');
        link1.setAttribute('href', 'style-1-of-3.css?test=attribute-changed');
        link1.setAttribute('integrity',
            'sha256-RvLeYLQyPa_ZQk95Rj0XQpfsoBHW9Vrqb3zwo5DScrI=');
        link1.addEventListener('load', test1.step_func_done(function() {
            var color =
                window.getComputedStyle(document.querySelector('#p1')).color;
            assert_equals(color, "rgb(0, 128, 0)",
                "The p#1 element's text should be green.");
        }));
        link1.addEventListener('error',
            test1.unreached_func('Integrity check failed unexpectedly'));
        document.head.appendChild(link1);
        link1.setAttribute('integrity',
            'sha256-wrongwrongwrongwrongwrongwrongwrongwrongwro=');

        var test2 = async_test(
            'Integrity attribute at the time of fetch start should be used ' +
            '(wrong -> correct)');
        var link2 = document.createElement('link');
        link2.setAttribute('rel', 'stylesheet');
        link2.setAttribute('href', 'style-2-of-3.css?test=attribute-changed');
        link2.setAttribute('integrity',
            'sha384-wrongwrongwrongwrongwrongwrongwrongwrongwrongwrongwrongwrongwron');
        link2.addEventListener('load',
            test2.unreached_func('Integrity check passed unexpectedly'));
        link2.addEventListener('error', test2.step_func_done());
        document.head.appendChild(link2);
        link2.setAttribute('integrity',
            'sha384-j1bGpDxu0bZAb4jBJzciDWuVUuOTXlLvB9WNKDh7Gik9ygF6CctjgYISUwShHmFM');
        </script>
        <p id="p1">Test 1</p>
        <p id="p2">Test 2</p>
    </body>
</html>
